<template>
<div class="box80">
    <div class="html">
        <div class="screenList">
            <el-form :inline="true" class="demo-form-inline">
                <div class="des">
                    <!-- <el-select value-key="id" v-model="brandIdList" multiple collapse-tags popper-class="aase" placeholder="灯具品牌">
                        <el-option v-for="item in lampBrandList" :key="item.id" :label="item.brandName" :value="item"></el-option>
                    </el-select> -->
                    <el-popover placement="bottom" trigger="click" width="610" v-model="showlampBrand">
                      <el-button size="mini" type="text" @click="showlampBrand = false">
                        <i class="el-icon-close"></i>
                      </el-button>
                      <div class="bukong_bom_list_search">
                        <el-form-item>
                          <el-input v-model="searchBrand" placeholder="请输入内容">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                          </el-input>
                          <button @click="ClickSearchBrand">搜索</button>
                        </el-form-item>
                      </div>
                      <div class="bukong_bom_list_cont">
                        <ul class="wid100">
                          <li
                            v-for="(item, index) in lampBrandList"
                            :data-index="index"
                            @click="chooseBrand(item,index)"
                            :key="index"
                            :class="{'active': item.delFlag == '1'}">
                            <div class="imgs">
                              <div class="BoxTable">
                                <div class="BoxCell">
                                    <img :src="ImgPath + item.brandLogo" >
                                    <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                                </div>
                              </div>
                            </div>
                            <p>{{item.brandName}}</p>
                          </li>
                        </ul>
                      </div>
                      <!-- <div class="redrt">*只提供会员品牌搜索</div>  -->
                      <el-button slot="reference">灯具品牌</el-button>
                    </el-popover>
                </div>
                <div class="des">
                    <!-- <el-select value-key="id" v-model="lumTypes"  collapse-tags popper-class="aase" placeholder="灯具类型">
                        <el-option label="灯具类型" value=""></el-option>
                        <el-option v-for="item in lampTypeList" :key="item.id" :label="item.lampName" :value="item"></el-option>
                    </el-select> -->
                    <el-popover placement="bottom" trigger="click" width="840" v-model="showlampType" >
                      <div classs="bukong_bom_list_cont_s">
                        <el-button size="mini" type="text" @click='showlampType = false' class="dewddd">
                        <i class="el-icon-close"></i>
                      </el-button>
                      <div class="bukong_bom_list_cont">
                        <ul class="wid100">
                          <li
                            v-for="(item, index) in lampTypeList"
                            :data-index="index"
                            @click="chooseLamp(item,index)"
                            :key="index"
                            :class="{'active': item.delFlag == '1'}">
                            <div class="imgs">
                              <div class="BoxTable">
                                <div class="BoxCell">
                                    <img :src="ImgPath + item.sketchMapOriginal" >
                                    <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                                </div>
                              </div>
                            </div>
                            <p>{{item.lampName}}</p>
                          </li>
                        </ul>
                      </div>
                       </div> 
                      <el-button slot="reference">灯具类型</el-button>
                    </el-popover>
                </div>
                <div class="des">
                    <el-popover  ref="popoverPower" placement="bottom" trigger="click" popper-class="eselect ">
                        <div class="size size_all">
                        <ul>
                            <li @click="clearLumPower()">全部</li>
                            <li v-for="item in powerList" :key="item.id" @click="setPower(item)" v-html="item.dictCont"></li>
                            <li>
                                <el-form-item>
                                    <el-input v-model="request.lumPowerMin" @input="blurFixdgs()"></el-input> ~ 
                                    <el-input v-model="request.lumPowerMax" @input="blurFixdgs()"></el-input>
                                </el-form-item>
                            </li>
                        </ul>
                        </div>
                        <el-button slot="reference">功率<i class="el-icon-arrow-down"></i></el-button>
                    </el-popover>
                </div>
                <div class="des">
                    <el-popover ref="popoverColorTemp" placement="bottom" trigger="click" popper-class="eselect">
                        <div class="size size_all">
                        <ul>
                            <li @click="clearColorTemp()">全部</li>
                            <li v-for="item in colorList" :key="item.id" @click="setColorTemp(item)" v-html="item.dictCont"></li>
                            <li>
                                <el-form-item>
                                    <el-input v-model="request.colorTempMin" @input="colourFixdgs()"></el-input> ~ 
                                    <el-input v-model="request.colorTempMax" @input="colourFixdgs()"></el-input>
                                </el-form-item>
                            </li>
                            <li>
                                <el-form-item>
                                    <el-input v-model="request.colorTempLike" @input="colorTempLikeBulr()" class="sousuo"></el-input>
                                </el-form-item>
                            </li>
                        </ul>
                        </div>
                        <el-button slot="reference">色温色彩 <i class="el-icon-arrow-down"></i></el-button>
                    </el-popover>
                </div>
                <div class="des">
                <el-popover ref="popoverGTL" placement="bottom" trigger="click" popper-class="eselect">
                    <div class="size size_all">
                    <ul>
                        <li @click="clearGuangTongLiang()">全部</li>
                        <li @click="setGTL(0,1000)">≤1000lm</li>
                        <li @click="setGTL(1000,3000)">1000-3000lm</li>
                        <li @click="setGTL(3000,6000)">3000-6000lm</li>
                        <li @click="setGTL(6000,10000)">6000-10000lm</li>
                        <li @click="setGTL(10000,'')">＞10000lm</li>
                        <li>
                        <el-form-item>
                            <el-input v-model="request.guangTongLiangMin" @input="GTLBlur()"></el-input> ~ 
                            <el-input v-model="request.guangTongLiangMax" @input="GTLBlur()"></el-input>
                        </el-form-item>
                        </li>
                    </ul>
                    </div>
                    <el-button slot="reference">光通量<i class="el-icon-arrow-down"></i></el-button>
                </el-popover>
                </div>
                <div class="des">
                <el-popover ref="popoverGSJ" placement="bottom" trigger="click" popper-class="eselect">
                    <div class="size size_all">
                    <ul>
                        <li @click="clearGSJ()">全部</li>
                        <li v-for="item in angleList" :key="item.id" @click="setGSJ(item)" v-html="item.dictCont"></li>
                        <li>
                        <el-form-item>
                            <el-input v-model="request.lightAngleMin" @input="BlurGSJ()"></el-input> ~ 
                            <el-input v-model="request.lightAngleMax" @input="BlurGSJ()"></el-input>
                        </el-form-item>
                        </li>
                    </ul>
                    </div>
                    <el-button slot="reference">光束角 <i class="el-icon-arrow-down"></i></el-button>
                </el-popover>
                </div>
                <div class="des">
                    <el-popover ref="popoverKZFS" placement="bottom" trigger="click" popper-class="eselect">
                        <div class="size size_all">
                        <ul>
                            <li @click="clearKZFS()">全部</li>
                            <li v-for="item in kongzhifangshiList" :key="item.id" @click="setKZFS(item)" v-html="item.dictCont"></li>
                            <li>
                                <el-form-item>
                                    <el-input v-model="request.controlTypeStrLike" class="sousuo" @input="BlurKZFS()"></el-input><!-- 查询 -->
                                </el-form-item>
                            </li>
                        </ul>
                        </div>
                        <el-button slot="reference">控制方式<i class="el-icon-arrow-down"></i></el-button>
                    </el-popover>
                </div>
                <div class="des">
                    <el-popover placement="bottom" trigger="click">
                        <div class="size size_all">
                        <ul>
                            <li>
                            <el-form-item>
                                <el-input v-model="request.effectDescLike" @input="effectDescLikeBlur()" class="sousuo sousuo2"></el-input><!-- 查询 -->
                            </el-form-item>
                            </li>
                        </ul>
                        </div>
                        <el-button slot="reference">效果描述<i class="el-icon-arrow-down"></i></el-button>
                    </el-popover>
                </div>
            </el-form>
            <div class="cont">
                <div class="lt">
                    <div class="pitchOn">
                       <div class="cont" v-show="chooselampBrandList.length>0"> 
                            <div class="title">灯具品牌：</div> 
                            <span v-for="item in chooselampBrandList" :key="item.id" >{{item.brandName}}</span>
                            <i class="el-icon-close" @click="clearBrandList()"></i>
                        </div>
                          <div class="cont" v-show="chooseLampType.length>0"> 
                            <div class="title">灯具类型：</div> 
                            <span v-for="item in chooseLampType" :key="item.id" >{{item.lampName}}</span>
                            <i class="el-icon-close" @click="clearLampType()"></i>
                        </div>
                       <div class="cont" v-show="request.lumPowerMin != '' || request.lumPowerMax != ''">
                            <div class="title">功率：</div> 
                            <span v-if="request.lumPowerMin != '' && request.lumPowerMax != ''">
                                {{request.lumPowerMin}}-{{request.lumPowerMax}}W
                            </span>
                            <span v-else-if="request.lumPowerMin != ''">
                                ≥{{request.lumPowerMin}}W
                            </span>
                            <span v-else-if="request.lumPowerMax != ''">
                                ≤{{request.lumPowerMax}}W
                            </span>
                            <i class="el-icon-close" @click="clearLumPower()"></i>
                        </div>
                        <div class="cont" v-show="request.lumPowerDictIdText != ''">
                            <div class="title">功率：</div> 
                            <span>
                                {{request.lumPowerDictIdText}}
                            </span>
                            <i class="el-icon-close" @click="clearLumPower()"></i>
                        </div>
                        
                        <div class="cont" v-show="request.colorTempMin != '' || request.colorTempMax != '' || request.colorTempLike != ''">
                            <div class="title">色温色彩：</div> 
                            <span v-if="request.colorTempMin != '' && request.colorTempMax != ''">
                                {{request.colorTempMin}}-{{request.colorTempMax}}K
                            </span>
                            <span v-else-if="request.colorTempMin != ''">
                                ≥{{request.colorTempMin}}K
                            </span>
                            <span v-else-if="request.colorTempMax != ''">
                                ≤{{request.colorTempMax}}K
                            </span>
                            <span v-else-if="request.colorTempLike != ''">
                                {{request.colorTempLike}}
                            </span>
                            <i class="el-icon-close" @click="clearColorTemp()"></i>
                        </div>
                        <div class="cont" v-show="request.colorFlagIdText != ''">
                            <div class="title">色温色彩：</div> 
                            <span>
                                {{request.colorFlagIdText}}
                            </span>
                            <i class="el-icon-close" @click="clearColorTemp()"></i>
                        </div>
                        
                         <div class="cont" v-show="request.guangTongLiangMin != '' || request.guangTongLiangMax != ''">
                            <div class="title">光通量：</div> 
                            <span v-if="request.guangTongLiangMin != '' && request.guangTongLiangMax != ''">
                                {{request.guangTongLiangMin}}-{{request.guangTongLiangMax}}lm
                            </span>
                            <span v-else-if="request.guangTongLiangMin != ''">
                                ≥{{request.guangTongLiangMin}}lm
                            </span>
                            <span v-else-if="request.guangTongLiangMax != ''">
                                ≤{{request.guangTongLiangMax}}lm
                            </span>
                            <i class="el-icon-close" @click="clearGuangTongLiang()"></i>
                        </div>
                        <div class="cont" v-show="request.lightAngleMin != '' || request.lightAngleMax != ''">
                            <div class="title">光束角：</div> 
                            <span v-if="request.lightAngleMin != '' && request.lightAngleMax != ''">
                                {{request.lightAngleMin}}-{{request.lightAngleMax}}°
                            </span>
                            <span v-else-if="request.lightAngleMin != ''">
                                ≥{{request.lightAngleMin}}°
                            </span>
                            <span v-else-if="request.lightAngleMax != ''">
                                ≤{{request.lightAngleMax}}°
                            </span>
                            <i class="el-icon-close" @click="clearGSJ()"></i>
                        </div>
                        <div class="cont" v-show="request.lightAngleDictIdText != ''">
                            <div class="title">光束角：</div> 
                            <span>
                                {{request.lightAngleDictIdText}}
                            </span>
                            <i class="el-icon-close" @click="clearGSJ()"></i>
                        </div>
                        
                        <div class="cont" v-show="request.controlTypeStrLike != ''"> 
                            <div class="title">控制方式：</div> 
                            <span>{{request.controlTypeStrLike}}</span>
                            <i class="el-icon-close" @click="clearKZFS()"></i>
                        </div>
                        <div class="cont" v-show="request.controlTypeStrText != ''"> 
                            <div class="title">控制方式：</div> 
                            <span>{{request.controlTypeStrText}}</span>
                            <i class="el-icon-close" @click="clearKZFS()"></i>
                        </div>
                        
                        <div class="cont" v-show="request.effectDescLike != ''"> 
                            <div class="title">效果描述：</div> 
                            <span>{{request.effectDescLike}}</span>
                            <i class="el-icon-close" @click="clearEffectDescLike()"></i>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        <div class="screenTables">
            <productLampTable ref="table" v-on:tableOver="tableOver"></productLampTable>
        </div>
    </div>
 </div>   
</template>
<script>
import _ from 'lodash'
import productLampTable from '@/views/component/productLampTable.vue'
export default{
    data(){
        return{
            showlampType:false,
            showlampBrand:false,
            searchBrand:'',
            lumTypes:"",
            chooselampBrandList:[],
            lampBrandList:[], //灯具品牌
            lampTypeList:[], //灯具类型
            powerList:[], //功率列表
            colorList:[], //色温色彩列表
            angleList:[], //光束角列表
            kongzhifangshiList:[], //控制方式
            chooseLampType:[],
            request:{
                controlTypeStrText:'',
                lightAngleDictIdText:'',
                colorFlagIdText:'',
                lumPowerDictIdText:'',
                isPublic:1,
                brandIds:'', //灯具品牌 多选
                lumTypes:'', //灯具类型 多选
                lumPowerMin:'',
                lumPowerMax:'', //功率
                colorTempLike:'', //色温色彩
                colorTempMin:'', 
                colorTempMax:'', //区间值
                guangTongLiangMin:'',
                guangTongLiangMax:'',  //光通量
                lightAngleMin:'',
                lightAngleMax:'',//光束角
                controlTypeStrLike:'', //控制方式
                effectDescLike:'', //效果描述
                page:1,
                rows:20
            },
            tableStatus:1,
            totalCount:0,
            tableData:[],
        }
    },
    components:{
        productLampTable
    },
    watch:{
        showlampBrand:function(val){
            if(val){
                this.searchBrand =  ''
                this.ClickSearchBrand()
            }
        }
        // "lumTypes":function(val){
        //     if(val == null || val == ""){
        //         this.request.lumTypes = ''
        //         this.$refs.table.searchShowHideList(false);
        //     }else{
        //         this.request.lumTypes = val.id
        //         this.$refs.table.searchShowHideList(true);
        //     }
        //     this.search(1)
        // }
    },
    methods:{
        clearLampType(){
            this.chooseLampType = []

            this.request.lumTypes = ''
            for(var i = 0;i<this.lampTypeList.length;i++){
                this.lampTypeList[i].delFlag = "0"
            }
            this.search(1)
        },
        chooseLamp(item,index) {
            if(item.delFlag == '1'){
                this.lampTypeList[index].delFlag= "0"
            }else{
                this.lampTypeList[index].delFlag= "1"
            }
            var tempList = []
            let tempval = '';
            for(var i = 0;i<this.lampTypeList.length;i++){
                if(this.lampTypeList[i].delFlag == "1"){
                    tempval+=this.lampTypeList[i].id + ","
                    tempList.push(this.lampTypeList[i])
                }
            }
            tempval=tempval.substr(0,tempval.length-1)
            this.request.lumTypes = tempval
            this.chooseLampType=tempList
            this.search(1)
        },
        chooseBrand(item,index) {
            if(item.delFlag == '1'){
                this.lampBrandList[index].delFlag= "0"
            }else{
                this.lampBrandList[index].delFlag= "1"
            }
            var tempList = []
            let tempval = '';
            for(var i = 0;i<this.lampBrandListBak.length;i++){
                if(this.lampBrandListBak[i].delFlag == "1"){
                    tempval+=this.lampBrandListBak[i].id + ","
                    tempList.push(this.lampBrandListBak[i])
                }
            }
            tempval=tempval.substr(0,tempval.length-1)
            this.request.brandIds = tempval 
            this.chooselampBrandList=tempList
            this.search(1)
        },
        ClickSearchBrand(){
            var search = this.searchBrand.toLowerCase()
            if(search){
                this.lampBrandList = this.lampBrandListBak.filter(function(item) {
                    return item.brandName.toLowerCase().indexOf(search) > -1
                })
            }else{
                this.lampBrandList = this.lampBrandListBak
            }
        },
        clearBrandList(){
            this.chooselampBrandList=[]
            this.request.brandIds = '' 
            for(var i = 0;i<this.lampBrandList.length;i++){
                this.lampBrandList[i].delFlag = "0"
            }

            for(var i = 0;i<this.lampBrandListBak.length;i++){
                this.lampBrandListBak[i].delFlag = "0"
            }
            this.search(1)
        },
        clearLumTypes(){
            this.lumTypes = ""
        },
        blurFixdgs(){
            if(this.request.lumPowerMin != '' || this.request.lumPowerMax != ''){
                this.request.lumPowerDictId = ''
                this.request.lumPowerDictIdText = ''
            }
            
            this.search(1)
        },
        setPower(item){
            if(item.dictCont == '可定制'){
                this.request.lumPowerDictId = item.id
                this.request.lumPowerDictIdText = item.dictCont
                this.request.lumPowerMin = ''
                this.request.lumPowerMax = ''
            }else{
                this.request.lumPowerMin = item.dictExtra
                this.request.lumPowerMax = item.dictExtra1
                this.request.lumPowerDictId = ''
                this.request.lumPowerDictIdText = ''
            }
             this.$refs.popoverPower.doClose()
            this.search(1)
        },
        clearLumPower(){
            this.request.lumPowerMin = ''
            this.request.lumPowerMax = ''
            this.request.lumPowerDictId = ''
            this.request.lumPowerDictIdText = ''
             this.$refs.popoverPower.doClose()
            this.search(1)
        },
        colorTempLikeBulr(){
            this.request.colorTempMin = ''
            this.request.colorTempMax = ''
            this.request.colorFlagId = ''
            this.request.colorFlagIdText = ''
            this.search(1)
        },
        colourFixdgs(){
            if(this.request.colorTempMin != '' || this.request.colorTempMax != ''){
                this.request.colorFlagId = ''
                this.request.colorFlagIdText = ''
                this.request.colorTempLike = ''
            }
            this.search(1)
        },
        setColorTemp(item){
            if(item.dictExtra != '' || item.dictExtra1 != ''){
                this.request.colorTempMin = item.dictExtra
                this.request.colorTempMax = item.dictExtra1
                this.request.colorFlagId = ''
                this.request.colorFlagIdText = ''
                this.request.colorTempLike = ''
            }else{
                this.request.colorFlagId = item.id
                this.request.colorFlagIdText = item.dictCont
                this.request.colorTempLike = ''
                this.request.colorTempMin = ''
                this.request.colorTempMax = ''
            }
            this.$refs.popoverColorTemp.doClose()
            this.search(1)
        },
        clearColorTemp(){
            this.request.colorTempMin = ''
            this.request.colorTempMax = ''
            this.request.colorTempLike = ''
            this.request.colorFlagId = ''
            this.request.colorFlagIdText = ''
             this.$refs.popoverColorTemp.doClose()
            this.search(1)
        },
        GTLBlur(){
            this.search(1)
        },
         setGTL(min,max){
            this.request.guangTongLiangMin = min
            this.request.guangTongLiangMax = max
            this.$refs.popoverGTL.doClose()
            this.search(1)
        },
        clearGuangTongLiang(){
            this.request.guangTongLiangMin = ''
            this.request.guangTongLiangMax = ''
             this.$refs.popoverGTL.doClose()
            this.search(1)
        },
        
        BlurGSJ(){
                this.request.lightAngleDictId = ''
                this.request.lightAngleDictIdText =''
            this.search(1)
        },
         setGSJ(item){
            if(item.dictExtra != '' || item.dictExtra1 != ''){
                this.request.lightAngleMin =  item.dictExtra
                this.request.lightAngleMax =  item.dictExtra1
                this.request.lightAngleDictId =''
                this.request.lightAngleDictIdText =''
            }else{
                this.request.lightAngleDictId = item.id
                this.request.lightAngleDictIdText = item.dictCont
                this.request.lightAngleMin =  ''
                this.request.lightAngleMax =  ''
            }
            this.$refs.popoverGSJ.doClose()
            this.search(1)
        },
        clearGSJ(){
            this.request.lightAngleMin = ''
            this.request.lightAngleMax = ''
                this.request.lightAngleDictId = ''
                this.request.lightAngleDictIdText =''
            this.$refs.popoverGSJ.doClose()
            this.search(1)
        },

        BlurKZFS(){
            this.request.controlTypeStrText =  ''
            this.search(1)
        },
        setKZFS(item){
            this.request.controlTypeStrLike =  '' //item.dictCont
            this.request.controlType = item.id
            this.request.controlTypeStrText =  item.dictCont
            this.$refs.popoverKZFS.doClose()
            this.search(1)
        },
        clearKZFS(){
            this.request.controlType = ''
            this.request.controlTypeStrLike = ''
            this.request.controlTypeStrText =  ''
            this.$refs.popoverKZFS.doClose()
            this.search(1)
        },

        clearEffectDescLike(){
           this.request.effectDescLike = ''
           this.search(1)
        },
        effectDescLikeBlur(){
            this.search();
        },

        tableOver(){
            this.search(1)
        },
        initData(){
            let self = this
            //加载灯具品牌
            this.$http.postQuery('/api/banner/brands/stlampBrandJson',{},function(res){
                if(res.success){
                    for(var i = 0;i<res.data.length;i++){
                        res.data[i].delFlag = '0'
                    }
                    self.lampBrandList = res.data;
                    self.lampBrandListBak = res.data;
                }
            })

            //加载灯具类型
            this.$http.get("/api/banner/lampTypes/json", {}, function(res) {
                if (res.success) {
                    self.lampTypeList = res.data;
                }
            });

            //加载功率
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:'chanpingonglv'}, function(res) {
                if (res.success) {
                    self.powerList = res.data;
                }
            });

            //加载色温色彩
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:'chanpinsewenyanse'}, function(res) {
                if (res.success) {
                    self.colorList = res.data;
                }
            });

            //加载光束角
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:'chanpinguangshujiao'}, function(res) {
                if (res.success) {
                    self.angleList = res.data;
                }
            });


            //加载控制方式
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:'chanpinkongzhifangshi'}, function(res) {
                if (res.success) {
                    self.kongzhifangshiList = res.data;
                }
            });
            // var lumType = 0

            // //获取列表展示项
            // this.$http.get("/api/banner/stlamps/attributes/"+lumType, {}, function(res) {
            //     if (res.success) {
            //         console.log(res)
            //     }
            // });

        },
        showDetail(id){
             let routeUrl = this.$router.resolve({
                path: "/lampListDetails?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
        search(page){
            this.request.page = page
            this.$refs.table.search(this.request,true)
        },
        brandPage(){
            let routeUrl = this.$router.resolve({
                path: "/brandPage"
            });
            window.open(routeUrl.href, '_blank');
        }
    },
    created(){
        this.initData()
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.bukong_bom_list_search {
  .el-form-item__content {
    width: 300px;
    .el-input{
      width: 200px;
    }
    button{
          background-color: #5a63a3;
          border:none;
          color: #fff;
          padding: 0px 20px;
          height: 36px;
          line-height: 36px;
          margin-left: 10px;
          border-radius: 5px;
    }
  }
}
.bukong_bom_list_cont {
  position: relative;
  height: 360px;
  overflow: auto;
  margin-top: 18px;
  ul {
    li {
      float: left;
      width: 100px;
      text-align: center;
      background-color: #ffffff;
      margin: 5px;
      cursor: pointer;
      &.active{
        position: relative;
        .imgs{
           border: solid 1px #5962a3;
           position: relative;
           .el-upload-list__item-status-label{
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #5962a3;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #5962a3;
            display: block;
            .el-icon-check{
              color: #fff;
              position: absolute;
              right: 14px;
              top: 11px;
              transform:rotate(-50deg);
              -ms-transform:rotate(-50deg); 
              -moz-transform:rotate(-50deg); 
              -webkit-transform:rotate(-50deg); 
              -o-transform:rotate(-50deg);
            }
          }
        }
        p{
          color: #5962a3;
        }
      }
      .imgs {
        height: 90px;
        border: solid 1px #dcdcdc;
        border-radius: 4px;
        overflow: hidden;
        .BoxTable{
          height: 90px;
        }
        img{
             max-width: 90px !important;
             max-height: 80px;
           }
      }
      p {
        color: #333;
      }
    }
  }
}
.el-button--mini {
  position: absolute;
  right: 30px;
  color: #000;
  font-size: 18px;
  top: 5px;
}
    .screenList{
        .el-form{
            width: 100%;
            display: inline-block;
            .des{
                width: calc(12.5% - 5px);
                float: left;
                margin-left:5.714px;
                &:first-child{
                    margin-left: 0;
                }
                .el-button{
                    width: 100%;
                     border: none;
                    background-color: #eaecfd;
                    border-radius: 3px;
                    color: #333333; 
                    padding: 0 15px;
                    height: 40px;
                    line-height: 40px;
                    text-align: left;
                    position: relative;
                    text-align: center;
                    &:focus{
                        color: #fff;
                        border-color: #5a63a3;
                        background-color: #5a63a3;
                    }
                    i{
                        position: absolute;
                        right: 15px;
                        top:13px;
                        display: none;
                    }
                }
            }
        }
        .el-select{
            .el-input__inner{
                border: none;
                background-color: #eaecfd;
                border-radius: 3px;
                text-align: center;
                padding-right: 15px;
                color: #333333;
                &::-webkit-input-placeholder{
                    color: #333333;
                }
            }
             .el-input__suffix{
                    display: none;
                }
            .is-focus{
                 .el-input__inner{
                      background-color:#5a63a3;
                      color: #fff;
                      &::-webkit-input-placeholder{
                        color: #fff;
                    }
                 }
            }
            
        }
        .cont{
            overflow: hidden;
            .lt{
                width: calc(100% - 300px);
                float: left;
                margin-top: 20px;
            }
            .rt{
                width: 300px;
                text-align: right;
                float: left;
                margin-top: 20px;
                span{
                    img{
                        display: inline-block;
                    }
                    &.list_S{
                        button {
                            position: relative;
                            top: 4px;
                            padding: 0 0 5px;
                            border: none;
                             span {
                                position: relative;
                                top: -5px;
                                display: inline-block;
                                color: #999;
                                img {
                                    position: relative;
                                    top: 5px;
                                    margin-right:5px;
                                }
                            }
                        }
                    }
                    &.xuan{
                        margin-right: 12px;
                        display: inline-block;
                        position: relative;
                        top:5px;
                        height: 20px;
                    }
                }
            }
        }
    }
    .aase{
        background-color:#5a63a3;
        .el-select-dropdown__item{
             background-color:#5a63a3;
              color: #fff;
        }
       &.el-popper[x-placement^=bottom] .popper__arrow::after {
          border-bottom-color: #5a63a3;
        }
       
    }
    .pitchOn{
        .cont{
            display: inline-block;
            background-color: #ffffff;
            border-radius: 5px;
            border: solid 1px #e8e8e8;
            padding: 6px 11px;
            margin-right: 20px;
            &:last-child{
            margin-right: 0;
            }
            .title{
            display: inline-block;
            color: #888888;
            }
            span{
            display: inline-block;
            margin: 0 5px;
            color: #888888;
            }
            i{
            color: #e8e8e8;
            cursor: pointer;
            }
  }
}
.screenTables{
    .rt{
         text-align: right;
        margin-bottom: 15px;
        span{
            img{
                display: inline-block;
            }
            &.list_S{
                button {
                    position: relative;
                    top: 4px;
                    padding: 0 0 5px;
                    border: none;
                        span {
                        position: relative;
                        top: -5px;
                        display: inline-block;
                        color: #999;
                        img {
                            position: relative;
                            top: 5px;
                            margin-right:5px;
                        }
                    }
                }
            }
            &.xuan{
                margin-right: 12px;
                display: inline-block;
                position: relative;
                top:5px;
                height: 20px;
            }
        }
    }
}
.screenTable{
    margin-top: 25px;
     li {
        width: calc(20% - 16px);
        margin-left: 20px;
        float: left;
        margin-bottom: 20px;
        background-color: #f7f7f7;
        border-radius: 4px;
        text-align: center;
        img{
            width: auto;
            height: auto;
        }
        &:nth-child(5n + 1){
            margin-left: 0;
        }
        .des {
            border-radius: 4px 4px 0px 0px;
            background-repeat: no-repeat;
            background-size: cover;
            height: 160px;
            cursor: pointer;
        }
        .cont {
            padding: 12px;
        }
        .font16 {
            color: #5a63a3;
            cursor: pointer;
        }
        .font14 {
            color: #666666;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            word-break: break-all;
            line-height: 20px;
            height: 20px;
        }
    }
}
.screenTable2{
    margin-top: 22px;
    th{
        background-color: #f6f7fb;
        color: #555555;
            text-align: center;
    }
    .el-table{
        td{
            text-align: center;
            .cell{
                img{
                    width: auto;
                    height: auto;
                }
            }
            &:last-child{
                .btns_S{
                    display: none;
                    .btn2{
                        font-size: 12px;
                        line-height: 1.5em;                       
                        border-radius: 4px;                       
                        margin: 2px;
                        display: inline-block;
                        color: #fff;
                    }
                }
                &:hover{
                    background-color: #5a63a3;
                    .btns_S{
                        display: block;
                    }
                    .btns_S2{
                        display: none;
                    }
                }
            }
            .nclo{
                    color: #5962a3;
                    font-weight: bold;
                    cursor: pointer;
            }
        }
    }
}

.size {
  text-align: center;
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    width: 60px;
  }
  .el-form-item__content {
    display: inline-block;
    .el-input {
      display: inline-block;
      width: 60px;
      height: 26px;
      .el-input__inner {
        height: 100%;
        padding: 0 6px;
      }
    }
  }
  span {
    color: #333;
    margin: 0 5px;
  }
  li {
    cursor: pointer;
    margin: 10px 0;
    &:last-child{
      margin-bottom: 0;
    }
    &.active{//光学参数筛选的选中事件
          color: #409EFF;
          &::after{
            position: absolute;
            right: 20px;
            font-family: element-icons;
            content: "\E6DA";
            font-size: 12px;
            font-weight: 700;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }
    }
  }
}
.eselect{
    background-color: #5a63a3;
    color: #fff;
    border-color:  #5a63a3;
    &.el-popper[x-placement^=bottom] .popper__arrow::after{
        border-bottom-color: #5a63a3;
    }
    
    .size .el-form-item__content {
        .sousuo {
            width: 100%;
            .el-input{
                width: 100%;
            }
        }
        

    }
}
.size .el-form-item__content{
.sousuo2 {
            width: 100px;
        }
}
</style>